<template>
  <view class="index-page">

    <!-- 主内容区域 -->
    <view class="main-content">
		<view class="stat-card">
		  <text class="label">领养需求管理</text>
		</view>
      <view class="stat-card" style="margin: 10rpx 0;">
      <view style="margin: 20rpx;">
		  <view style="margin: 0 auto;">
			  <view style="float: left;margin: 0 20px;">
				  <text style=" float: left;">标题:</text><input type="text" style=" float: left; border: 1px solid #eee;" placeholder="输入标题" v-model="searchInput"/>
			  </view>
			  <button class="uni-button" size="mini" type="primary" @click="search">搜索</button>
		  </view>
      		
      
	  </view>
      <uni-table border stripe emptyText="暂无更多数据">
      	<!-- 表头行 -->
      	<uni-tr>
			<uni-th align="left">用户</uni-th>
      		<uni-th align="left">标题</uni-th>
			<uni-th align="left">详细介绍</uni-th>
      		<uni-th align="left">地址</uni-th>
      		<uni-th align="left">详细地址</uni-th>
			<uni-th align="left">照片</uni-th>
			<uni-th align="left">电话</uni-th>
			<uni-th align="left">状态</uni-th>
      		<uni-th align="center">操作</uni-th>
      	</uni-tr>
      	<!-- 表格数据行 -->
      	<uni-tr v-for="item in contentList">
      		<uni-td>{{item.username}}</uni-td>
      		<uni-td>{{item.title}}</uni-td>
			<uni-td>{{item.desc}}</uni-td>
      		<uni-td>{{item.fullAddress}}</uni-td>
			<uni-td>{{item.detailAddress}}</uni-td>
			<uni-td><image :src="item.imagePath" style="height: 100rpx;" mode="aspectFit"></image></uni-td>
			<uni-td>{{item.phone}}</uni-td>
			<uni-td>
				<view  v-if="item.status==1" style="background-color: #acacac; width: 130rpx;height: 50rpx;text-align: center;color: #eee;"><text>待审核</text></view>
				<view  v-if="item.status==2" style="background-color: #ee3437; width: 130rpx;height: 50rpx;text-align: center;color: #eee;"><text>审核驳回</text></view>
				<view  v-if="item.status==3" style="background-color: #54ff2e; width: 130rpx;height: 50rpx;text-align: center;color: #eee;"><text>审核通过</text></view>
			</uni-td>
      		<uni-td align="center">
      			<button  class="uni-button" size="mini" type="primary" @click="auditItem(item.id)">
					<text >审核</text>
				</button>
      			<button class="uni-button" size="mini" type="warn" @click="deleteItem(item.id)"
      				style="margin: 0 10rpx;">删除</button>
      		</uni-td>
      	</uni-tr>
      </uni-table>
      <view style="margin-top: 20rpx;">
      	<uni-pagination :total="contentTotal" @change="changePage"></uni-pagination>
      </view>
	  </view>
      <uni-popup  ref="popup" type="center" border-radius="10px 10px 0 0">
		  <view class="popup" style="padding: 50rpx;">
			   请选择审核意见:<uni-section title="审核意见" type="line">
			        <uni-data-select
			          v-model="auditStatus"
			          :localdata="range"
			        ></uni-data-select>
			      </uni-section>
				  <view style="width: 100%;margin-top: 30px;">
					  <view style="width: max-content;margin: 0 auto;">
						  <button  class="uni-button" size="mini" type="primary" @click="submitAudit">提交</button>
					  </view>
					  
				  </view>
				  
		  </view>
	  </uni-popup>
    </view>
  </view>
</template>

<script setup>
import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	
	import {
		baseUrl,
	} from '../static/js/common.js'

	const contentList = ref([])
	let contentTotal = ref(0)

	let pageIndex = 1;
	let pageSize = 10;
	let popup=ref()
	let range=ref([
        { value: 2, text: "拒绝" },
        { value: 3, text: "通过" },
      ])
	let auditStatus=ref(0)
	
	let id=0
	  let searchInput=ref()
	  function search(){
	  	fillTable()
	  }
	function submitAudit(){
		let authorization = localStorage.getItem("admin-token")
		let params={
			  id,
			  status:auditStatus.value
		  }
		  uni.request({
		  	url:baseUrl+'/post/audit',
			data:params,
			header: {
				'Authorization': authorization
			},
			method:'POST',
			success:(res)=>{
				if(res.data.code==200){
					popup.value.close()
					fillTable()
				}
			}
		  })
	  }

	function deleteItem(id) {
		let authorization = localStorage.getItem("admin-token")
		uni.showModal({
			title: '提示',
			content: '确定删除这个领养需求吗',
			success: function(res) {
				if (res.confirm) {
					uni.request({
						url: baseUrl + '/post/delete?id=' + id,
						header: {
							'Authorization': authorization
						},
						success: (res) => {
							if (res.data.code == 200) {
								uni.showToast({
									icon: 'success',
									title: '删除成功'
								})
								fillTable()
							}
						}
					})
				} else if (res.cancel) {

				}
			}
		});

	}

	function auditItem(postId) {
		id=postId
		popup.value.open()
	}


	function changePage(e) {
		pageIndex = e.current
		fillTable()
	}

	onShow(() => {
		fillTable()
	})

	function fillTable() {
		let authorization = localStorage.getItem("admin-token")
		let params = {
			pageIndex,
			pageSize,
			'title':searchInput.value
		}
		uni.request({
			url: baseUrl + "/post/managerList",
			data: params,
			method: 'POST',
			header: {
				'Authorization': authorization
			},
			success: (res) => {
				
				contentList.value = res.data.data.result
				contentTotal.value = res.data.data.itemCount
			}
		})
	}



</script>

<style scoped>
.index-page {
  display: flex;
}

.main-content {
  flex: 1;
  
}
.popup{
	width: 500rpx;
	height: 300rpx;
	background-color: white;
	
}

    .stat-card {
      flex: 1;
      background: #fff;
      padding: 30rpx;
      border-radius: 12rpx;
      box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);

      .value {
        display: block;
        font-size: 48rpx;
        color: #42b983;
      }

      .label {
        color: #999;
        font-size: 28rpx;
      }
    }
</style>